import React,{Component} from 'react'
import {Link, withRouter} from 'react-router-dom'
import './index.less'
import {Menu,Icon} from 'antd'
import pageMenu from 'config/pageMenu'

const {SubMenu} = Menu
/**
 * 名称：左侧菜单组件
 * 描述：页面左侧菜单，包含icon，标题，菜单
 * 调用：管理页面
 * 输入： 
 * 时间：20220328
 */
class LeftNav extends Component{
    /**
     * 根据菜单列表生成菜单节点
     * @param {*} pageMenu   菜单列表
     * @returns 
     */
    getMenuNodes = (pageMenu)=>{
        const path = this.props.location.pathname
        return pageMenu.map( item => {
            if(item.disable){
                return ;
            }

            if (!item.children){
                return (
                    <Menu.Item key={item.key}>
                     <Link to={item.to}>
                         <Icon type={item.icon}/>
                         <span>{item.title}</span>
                     </Link>

                    </Menu.Item>
                )
            }
            else{
                const cItem = item.children.find(cItem => cItem.key === path)
                if (cItem) {
                    this.openKey = item.key
                }
                return (
                <SubMenu
                   key={item.key}
                   title={
                       <span>
                           <Icon type={item.icon}/>
                           <span>{item.title}</span>
                       </span>
                   }
               >
                   {this.getMenuNodes(item.children)}
                </SubMenu>)
            }
            
        })

    }
    render(){
        const menuNodes = this.getMenuNodes(pageMenu)
        const selectedKey = this.props.location.pathname
        return (
            <div className ="left-nav">
                <Link className="left-nav-link" to="/home">
                    <img src={"/images/logo.jpg"} alt="logo" />
                    <h1>营销平台</h1>
                </Link>
                <Menu
                 selectedKeys={[selectedKey]}
                 defaultOpenKeys={[this.openKey]}
                 mode="inline"
                 theme="dark"
                 
                >
                   {menuNodes}

                </Menu>
            </div>
        )
    }

    

}

export default withRouter(LeftNav)